<template>
    <div class="main-page ">
        <el-row class="">
            <el-row class="blue_area">
                <el-row>
                    <el-col span="21" offset="1">
                        <el-tag class="org_tag" color="white" size="small">机构一</el-tag>
                    </el-col>
                    <el-col span="2">
                        <el-dropdown @command="handleoper">
      <span class="el-dropdown-link">
          <i class="el-icon-edit-outline" style="color:white"></i>
      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="modify">修改班级</el-dropdown-item>
                                <el-dropdown-item command="deleteCls">删除班级</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <el-row class="cls_name">{{classInfo.name}}</el-row>
                <el-row><span class="comments_name">备注:{{classInfo.comments}}</span></el-row>
            </el-row>
            <el-row>
                <el-row><span class="subject_name">课程:{{classInfo.subject}}</span></el-row>
                <el-row><span class="subject_name">老师:{{classInfo.ename}}</span></el-row>
                <el-row><span class="subject_name">人数:{{classInfo.totalStus}}/{{classInfo.finishRecords}}</span>
                </el-row>
            </el-row>
            <el-progress :percentage="70"></el-progress>

            <el-row>
                <el-col><span class="subject_name">已上{{classInfo.finishRecords}}节课</span></el-col>
                <el-col><span class="subject_name">已拍{{classInfo.remainRecords}}节课</span></el-col>
            </el-row>
            <el-row style="margin-top: 5px">
                <el-col><span class="subject_name">班级操作</span></el-col>
                <el-col>
                    <el-switch
                        v-model="wxnotify"
                        @change="wxswitch"
                        active-text="开启微信通知"
                        inactive-text="关闭微信通知">
                    </el-switch>
                </el-col>

            </el-row>
            <el-row style="margin-top: 10px">
                <el-button @click="endCls" class="head-button" type="primary" plain size="small">完结</el-button>
                <el-button @click="deleteCls" class="head-button" type="primary" plain size="small">删除</el-button>
            </el-row>
        </el-row>


    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '@/components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";


    export default {
        name: 'clsDetailHead',
        data() {
            return {
                wxnotify:1,
                classInfo: {
                    name: "美术一班",
                    comments: "这个班很值钱",
                    subject: "美术",
                    ename: "张老师",
                    finishRecords: 4,
                    remainRecords: 25,
                    totalStus: 24
                },
                value3: null,
                loading: false,
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {
            ...mapGetters(['adminInfo'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod']),
            async wxswitch() {
                const res = await wxswitchApi({id: this.cid, wxnotify: this.wxnotify});
                if (res.success == true) {

                }
                else {

                }
            },
            async endCls() {
                const res = await updateCls({data: {id: this.cid, status: 2}})
                if (res.success == true) {

                } else {

                }
            },
          async   deleteCls() {
                const res = await
                deleteClsApi({data: {id: this.cid}});
                if (res == true) {

                } else {

                }
            },
            async initClsDetail(id) {
                const res = await clsDetailApi();
                if (res.success == true) {
                    this.classInfo = res.data;

                } else {


                }


            }


        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }

    .headborder {
        border: solid 1px #e4e4e4;

    }

    .blue_area {
        background-color: #359DFF;
    }

    .cls_name {
        margin-top: 20px;
        font-size: 16px;
        color: white;
        font-weight: bold;
    }

    .comments_name {
        font-size: 10px;
        color: white;

    }

    .subject_name {
        margin-top: 5px;
        font-size: 10px;
    }

    .org_tag {
        border-radius: 0px;
    }

    .head-button {
        font-size: 10px;
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 0px;
    }
</style>
